<template xmlns="http://www.w3.org/1999/html">
  <div>
    <div class="app-container">

      <div class="filter-container">
        <div class="filter-item">
          <span>教师名称：</span>
          <el-input  v-model="query.name" placeholder="教师名称"  style="width: 200px;margin-right: 5px;" ></el-input>
        </div>
        <div class="filter-item">
          <span>加入日期：</span>
          <el-date-picker
            v-model="query.createdAt" value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
      <!--<el-select filterable v-model="query.country_id" style="width: 200px;margin-right: 5px;" class="filter-item">
        <el-option v-for="item in  countries" :key="item.value" :label="item.label " :value="item.value" />
      </el-select>-->



      <el-button style="margin-left: 5px" @click="queryRecords" type="primary" class="filter-item">查询</el-button>
      <el-button @click="reload" type="danger" class="filter-item">重置</el-button>
      <el-button @click="addTeacher" type="primary" class="filter-item">添加名师</el-button>
      <el-button @click="handleDelete" type="primary" class="filter-item">批量删除</el-button>
      <el-button @click="handleStatus(null,undefined,2)" type="primary" class="filter-item">批量下架</el-button>
      </div>

      <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
    <el-table-column type="selection" min-width="55" />
    <el-table-column prop="id" label="ID" min-width="80" />
    <el-table-column prop="cover_url" label="教师图片" min-width="100" >
      <template slot-scope="scope">
        <img v-if="scope.row.pic_url" class="table-img" :src="scope.row.pic_url">
      </template>
    </el-table-column>
    <el-table-column  prop="posi" label="教师职位" min-width="150" />
    <el-table-column  prop="content" label="教师简介" min-width="300" />
    <el-table-column prop="name" label="教师名称" min-width="150" />
    <el-table-column prop="get_guard_user.name" label="发布人" min-width="100" />
    <el-table-column label="上架/下架" min-width="100px" >
          <template slot-scope="scope">
            <span>{{scope.row.status=='1'?'上架':'下架'}}</span>
          </template>
        </el-table-column>
    <!--<el-table-column prop="sort" label="排序" width="80" >
      <template slot-scope="scope">
        <el-input @input="changeSwitch(scope.row)"  v-model="scope.row.sort" placeholder="请输入序号"></el-input>
      </template>
    </el-table-column>-->
    <el-table-column prop="created_at" label="上传时间" min-width="160" />
    <el-table-column fixed="right" label="操作" min-width="150">
      <template slot-scope="scope">
				<el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        <el-button v-if="scope.row.status=='1'" size="mini" type="text" @click="handleStatus(scope.$index, scope.row,2)">下架</el-button>
        <el-button v-else size="mini" type="text" @click="handleStatus(scope.$index, scope.row,1)">上架</el-button>
        <el-button v-if="scope.row.is_top==1" size="mini" type="text" @click="handleTop(scope.$index, scope.row,2)">取消置顶</el-button>
        <el-button v-else size="mini" type="text" @click="handleTop(scope.$index, scope.row,1)">置顶</el-button>
			</template>
    </el-table-column>
    </el-table>

      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[5,10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    </div>
</template>

<script>

import { myGet, myPost } from '@/utils/myRequest'
const urlChange = '/guard/teacher/change'
const urlAdd = '/guard/teacher/add'
const urlLst = '/guard/teacher/lst'
const urlDel = '/guard/teacher/del'

export default {


  data() {
    return {
      host:process.env.VUE_APP_HOST,
      listLoading:false,
      countries:[],
      list:[],
      selectId:[],
      classifies:[{value:0,label:'全部'}],
      query:{
        name:'',
        countryId:"",
        createdAt:[],
      },
      pagination:{
        page:1,
        pageSize:10,
        total:0,
      }
    }
  },
  methods: {

    addTeacher(){
      this.$router.push({path:'/addTeacher'})
    },

    reload(){
      Object.assign(this.$data.query,this.$options.data().query)
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },

    queryRecords(){
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },

    getRecords(){
      this.listLoading = true
      let params = Object.assign(this.query,this.pagination)
      myGet(urlLst,params).then(res=>{
        this.listLoading = false
        if(res.status){
          this.list = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },
    handleEdit(index,row){
      let id = row.id
      this.$router.push(`/editTeacher/${id}`)
    },

    handleDelete(index,row){

      if(typeof(row) == "undefined" ){
        if(this.selectId.length<=0){
          this.$message.error('请先选择项目！')
          return;
        }
      }


      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = [];
        if(typeof(row) == "undefined" ){
          ids = this.selectId
        }else{
          ids = [row.id]
        }
        myGet(urlDel,{ids}).then(res=>{
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords()
          }
        })
      });
    },
    handleStatus(index,row,status){
      let tip = status==1?'确定要上架吗?':'确定要下架吗?';
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        let id = [];
        if(typeof(row) == "undefined" ){
          id = this.selectId
        }else{
          id = [row.id]
        }

        myPost(urlChange, {
          //is_top:row.is_top,
          //up_down:row.up_down,
          status:status,
          id:id,
        }).then(res => {
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords();
          }
        })
      });
    },
    handleTop(index,row,is_top){
      let tip = is_top==1?'确定要置顶吗?':'确定要取消置顶吗?';
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        myPost(urlChange, {
          //is_top:row.is_top,
          //up_down:row.up_down,
          is_top:is_top,
          id:row.id,
        }).then(res => {
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords();
          }
        })
      });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.selectId = [];
      val.forEach(item=>{
        this.selectId.push(item.id)
      })
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.pagination.page  = val
      this.getRecords();
    },
  },

  mounted() {
    this.getRecords()
  },
}
</script>

<style scoped>
  .table-img{
    width: 50px;
    height: 50px;
}
</style>
